<template>
    <div id="left-side">

        <div style="height: 40%;text-align: center">
            <span class="left-options">决议</span>
            <span class="left-options">外交</span>
            <span class="left-options">监狱</span>
            <span class="left-options">内臣</span>
        </div>
        <div style="height: 20%;text-align: center">
            <span class="left-options center-options">下一回合</span>
        </div>

        <div style="height: 40%;text-align: center">
            <span class="left-options">内政</span>
            <span class="left-options">战争</span>
            <span class="left-options">暗杀</span>
            <span class="left-options">报告</span>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        name: "LeftSide"
    }
</script>

<style scoped>
    .center-options:hover {
        color: greenyellow !important;
    }

    .center-options {
        background-color: #ff95FF;
        padding: 10px 0px;
        box-sizing: border-box;

    }

    .left-options {
        margin-bottom: 20px;
        display: block;
    }

    .left-options:hover {
        color: red;
        user-select: none;

    }

    #left-side {
        height: 800px;
        color: white;
        text-align: center;
        width: 30px;
        background-color: cornflowerblue;
        border: orange 3px solid;
        box-sizing: border-box;
    }
</style>